<template>
  <div class="SearchD">
    <ul>
      <li v-for="(v,i) in videoList" :key="i">
        <div class="SearchD_a" v-if="v.type==0"><router-link :to="`/mvInfo/${v.vid}`"><img :src="v.coverUrl"></router-link></div>
        <div class="SearchD_a" v-if="v.type==1"><router-link :to="`/videoInfo/${v.vid}`"><img :src="v.coverUrl"></router-link></div>
        <div class="SearchD_b" v-if="v.type==0"><span></span><router-link :to="`/mvInfo/${v.vid}`">{{v.title}}</router-link></div>
        <div class="SearchD_b" v-if="v.type==1"><router-link :to="`/videoInfo/${v.vid}`">{{v.title}}</router-link></div>
        <div class="SearchD_c" v-if="v.type==0"><span v-for="(q,w) in v.creator" :key="w"><span v-if="w>0">&nbsp;/&nbsp;</span><router-link :to="`/singerInfo/${q.userId}`">{{q.userName}}</router-link></span></div>
        <div class="SearchD_c" v-if="v.type==1"><span v-for="(q,w) in v.creator" :key="w"><span>by&nbsp;</span><span v-if="w>0">&nbsp;/&nbsp;</span><router-link to="#">{{q.userName}}</router-link></span></div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      keyword: "",
      type: "",
      videoList:{}
    };
  },
  methods: {
    //   获取视频数据
    getData() {
      axios
        .get(
          `http://127.0.0.1:3000/cloudsearch?keywords=${this.keyword}&type=${this.type}`
        )
        .then((res) => {
          this.videoList = res.data.result.videos;
        });
    },
  },
  created() {
    this.keyword = this.$route.params.value;
    this.type = this.$router.history.current.name;
    this.getData();
  },
};
</script>
<style scoped>
.SearchD>ul{
  display: flex;
  flex-wrap: wrap;
}
.SearchD>ul>li{
  margin-left: 25.75px;
  padding-bottom: 40px;
}
.SearchD>ul>li:nth-child(1){
  margin-left: 0px;
}
.SearchD>ul>li:nth-child(5n+1){
  margin-left: 0px;
}

.SearchD>ul>li>.SearchD_a>a>img{
  width: 159px;
  height: 90px;
}
.SearchD>ul>li>.SearchD_b{
  display: flex;
  align-items: center;
}
.SearchD>ul>li>.SearchD_b>span{
  display: block;
  width: 26px;
  height: 16px;
  background: url("../../../public/images/icon2.png") no-repeat -270px -480px;
}
.SearchD>ul>li>.SearchD_b>a{
  display: block;
  width: 133px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  padding-left: 5px;
}

.SearchD>ul>li>.SearchD_b>a:hover{
  text-decoration: underline;
}
.SearchD>ul>li>.SearchD_c>span>span{
  font-size: 1px;
}
.SearchD>ul>li>.SearchD_c>span>a{
  font-size: 12px;
}
.SearchD>ul>li>.SearchD_c>span>a:hover{
  text-decoration: underline;
}
</style>